<template>
  <div style="overflow: scroll;margin-bottom: 55px;margin-top: 8px;">
 <div>

  <!-- 购物车 商品 列表 -->
  <van-card
  v-for="(item,index) in cartList"
  :key="index"
  :price="item.price"
  :title="item.goodsName"
  :thumb="item.picUrl"
  :desc="item.addTime"
>
  <template #tags>
    <!-- 单选框 -->
    <div class="shoppSelect">
    <van-checkbox  v-model="item.checked" @click="chickChecked(item.productId,item.checked)" checked-color="#40a380 "></van-checkbox>
    </div>
    
  </template>
  <template #footer>
    <van-stepper v-model="item.number" :min="0" @change="updataNumber(item.number,item.goodsId,item.id,item.productId,index)" disable-input />
  </template>
</van-card>
<p style="text-align: center;margin: 6px 0;font-size: 14px;color: rgb(157 157 157);">已加载完毕!</p>

<!-- 底部的  提交订单 -->
<van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
  <van-checkbox checked-color="#ee0a24" v-model="allChecked">全选</van-checkbox>

</van-submit-bar>

 </div>
  </div>
</template>

<script>
import {Notify,Dialog} from "vant"
export default {
  data(){
    return{
      cartList:[],
      cartTotal:[],
      value:0,
    }
  },
  async created(){
  if(!localStorage.getItem('X-Litemall-Token')){
    this.$router.push('/login')
  }

  await this.$axios({
    url:'/wx/cart/index',
    headers:{
      'X-Litemall-Token':localStorage.getItem('X-Litemall-Token'),
    },
  }).then(res=>{
    if(res.data.errno!==0){
      localStorage.removeItem('X-Litemall-Token')
    }
    // console.log(res.data.data);
    this.cartList=res.data.data.cartList
    this.cartTotal=res.data.data.cartTotal
  })
},
computed:{
  totalPrice(){
    return this.cartList
    .filter(itme=>itme.checked===true)
    .reduce((sum,item)=>sum+item.price*item.number,0)*100
  },
  allChecked:{
    get(){
      return this.cartList.every(item=>item.checked===true)
    },
     async set(checked){
      this.cartList.forEach(item=>{
        item.checked=checked
        this.chickChecked(item.productId,item.checked?1:0)
      })
      

    },
  },
},
methods:{
  chickChecked(pid,checked){
     this.$axios({
        method:'POST',
        url:'/wx/cart/checked',
        headers:{
          'X-Litemall-Token':localStorage.getItem('X-Litemall-Token')
        },
        data:{
          "productIds": [
            pid
            ], 
            "isChecked": (checked?1:0) 
        },
      })
  },
  onSubmit(){
    alert('提交成功!')
  },
  async updataNumber(number,goodsId,id,productId,index){
    if(number<=0){
       Dialog.confirm({
        message: '确定移除该商品吗?',
      })
        .then( async() => {
            await this.$axios({
              method:'POST',
              url:'/wx/cart/delete',
              headers:{
                'X-Litemall-Token':localStorage.getItem('X-Litemall-Token'),
              },
              data:{
              "productIds": [
              productId
              ] 
              },
            }).then(async res=>{
              console.log(res);
              Notify({ type: 'danger', message:'已删除该商品!' });

              // 重新渲染
              await this.$axios({
            url:'/wx/cart/index',
            headers:{
              'X-Litemall-Token':localStorage.getItem('X-Litemall-Token'),
            },
          }).then(res=>{
            if(res.data.errno!==0){
              localStorage.removeItem('X-Litemall-Token')
            }
            console.log(res.data.data);
            this.cartList=res.data.data.cartList
          })
            })
            return
        })
        .catch(() => {
          this.cartList[index].number++
          return
        });
  
    }
    else{
      await this.$axios({
      method:'POST',
      url:'/wx/cart/update',
      headers:{
        'X-Litemall-Token':localStorage.getItem('X-Litemall-Token')
      },
      data:{
        "number": number, 
        "goodsId": goodsId, 
        "id": id, 
        "productId": productId 
      },
    }).then(res=>{
      if(res.data.errno===0){
        // Notify({ type: 'success', message: res.data.errmsg });
      }
      else{
        Notify({ type: 'danger', message:res.data.errmsg });
      }
    })
    // console.log(number);
    }

  }
},
}
</script>

<style scoped>
.van-submit-bar {
    position: fixed;
    bottom: 50px !important;
    left: 0;
    z-index: 100;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    -webkit-user-select: none;
    user-select: none;
}
.van-card__header{
  margin-left: 35px;
}
.van-checkbox__icon{
  position: absolute !important;
  left: 0px;
}
.shoppSelect{
  position: absolute;
  left: -120px;
  top: calc(50%);
}
</style>